<template>
  <view
    class="color-slider-wrapper"
    @mousedown="silder.touchstart"
    @mousemove="silder.touchmove"
    @mouseup="silder.touchend"
    @mouseleave="silder.touchend"
    @touchstart="silder.touchstart"
    @touchmove="silder.touchmove"
    @touchend="silder.touchend"
    @touchcancel="silder.touchend"
  >
    <view class="color-slider" :style="background">
      <view class="slider-block" :style="pointStyle"> </view>
    </view>
  </view>
</template>
<!-- #ifdef APP-VUE || H5 || MP-WEIXIN -->
<script module="silder" src="./ColorSliderWxs.wxs" lang="wxs"></script>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<script module="silder" src="./ColorSliderAlipay.sjs" lang="sjs"></script>
<!-- #endif -->
<!-- #ifdef MP-TOUTIAO -->
<script module="silder" src="./ColorSliderToutiao.sjs" lang="sjs"></script>
<!-- #endif -->
<script>
  export default {
    emits: ['change'],
    props: {
      value: {
        type: Number,
        default: 0,
      },
      type: {
        type: String,
        default: 'hue',
      },
      color: {
        type: String,
        default: 'black',
      },
    },
    data() {
      return {
        x: 0,
        width: 0,
        pointStyle: {},
        touched: false,
      };
    },
    watch: {
      value(newValue) {
        if (this.type === 'hue') {
          this.x = parseInt((newValue * this.width) / 360);
        } else if (this.type === 'alpha') {
          this.x = parseInt(newValue * this.width);
        }
        if (!this.touched) {
          this.pointStyle = { left: this.x - 8 + 'px' };
        }
      },
    },
    computed: {
      background() {
        if (this.type == 'hue') {
          return 'background-image: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);';
        } else {
          return `background-image: linear-gradient(to right, transparent, ${this.color});`;
        }
      },
    },
    mounted() {
      this.init();
    },
    methods: {
      firstTouch() {
        this.touched = true;
      },
      emitEvent({ distance }) {
        let value;
        if (this.type === 'hue') {
          value = parseInt(distance * 360);
        } else {
          value = parseFloat(distance.toFixed(1));
        }
        this.$emit('change', value);
      },
      init() {
        const views = uni.createSelectorQuery().in(this);
        views
          .select('.color-slider')
          .boundingClientRect((data) => {
            const { width, left } = data;
            this.width = width;
            if (this.type === 'hue') {
              this.x = parseInt((this.value * width) / 360);
            } else if (this.type === 'alpha') {
              this.x = parseInt(this.value * width);
            }
            this.pointStyle = { left: this.x - 8 + 'px' };
          })
          .exec();
      },
    },
  };
</script>

<style scoped>
  .color-slider-wrapper {
    border-radius: 2px;
    width: 400rpx;
    background-size: 16px 16px;
    background-position:
      0 0,
      8px 8px;
    background-image:
      linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
      linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
  }

  .color-slider {
    width: 100%;
    height: 16px;
    border-radius: 2px;
    outline: none;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .slider-block {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f2f2f2;
    cursor: pointer;
    box-shadow:
      inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
      7px 7px 20px 0px rgba(0, 0, 0, 0.1),
      4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  }
</style>
